<template>
  <div class="about">
    <el-container>
      <el-header class="title">
        <span class="title1">{{ title }}</span>
        <span class="title2"> 别名:离枝，无患子科，荔枝属</span>
      </el-header>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-menu-item
            v-for="(item, index) in navigate"
            :key="index"
            @click="handleClick(item.name, item.label)"
          >
            <el-icon><setting /></el-icon>
            <span>{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card class="box-card" v-model="select">
          <template #header>
            <div class="card-header">
              <span>{{ select.title }}</span>
            </div>
          </template>
          <div class="text item" v-if="!isPic && !isOther">
            <p v-for="(item, index) in select.content" :key="index">
              {{ item }}
            </p>
          </div>
          <div class="text item picture" v-else-if="isPic">
            <img :src="pics[0]" />
            <div class="right">
              <img
                v-for="(item, index) in pics.slice(1)"
                :key="index"
                :src="item"
              />
            </div>
          </div>
          <div class="text item oth" v-else>
            <p>评估等级：EN</p>
            <p>
              基因信息：https://www.ncbi.nlm.nih.gov/gene/?term=Litchi+chinensis+Sonn.
            </p>
            <p class="pp">生长环境：</p>

            <img src="../assets/qx.jpg" style="width: 600px" />
            <!--<div id="retainChart" class="retainChart" style="height: 200px" ></div>-->
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//import * as echarts from 'echarts'
import { getPlant } from "@/api/index";
export default {
  name: "About",
  components: {},
  data () {
    return {
      isOther: false,
      isPic: false,
      title: '',
      detail: '',
      allMessage: '',
      navigate: [
        {
          label: '基本特征',
          name: 'morphologicalCharacteristics'
        },
        {
          label: '生长习性',
          name: 'growthHabits'
        },
        {
          label: 'APGⅢ分类',
          name: 'apg'
        },
        {
          label: '植物文化',
          name: 'plantCulture'
        },
        {
          label: '图片',
          name: 'pic'
        },
        {
          label: '详细地理分布',
          name: 'places'
        },
        {
          label: '其他信息',
          name: 'other'
        },

      ],
      select: {
        title: '',
        content: ''
      },
      pics: [],
      chartOption: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150],
            type: 'line'
          }
        ]
      },
    }
  },
  methods: {
    handleClick (name, label) {
      //name是变量名称
      if (name === 'pic') {
        this.isPic = true;
        this.isOther = false;
        this.select.title = label;
        this.pics = this.allMessage["imageUrl"].split("$");
      } else if (name === 'other') {
        this.isOther = true;
        this.isPic = false;
        this.select.title = label;
        /**
        console.log(document.querySelector('.pp'));
        console.log(document.getElementById('retainChart'))
        const retainChart = echarts.init(document.getElementById('retainChart'))
        retainChart.setOption(this.chartOption) */
      }
      else {
        this.isPic = false;
        this.isOther = false;
        this.select.title = label;
        this.select.content = [];
        this.select.content = this.allMessage[name].split("$");
        //console.log(this.select.content)
        //获取对应内容
      }

    },
    getMessage () {
      getPlant({
        name: '荔枝'
      })
        .then((res) => {
          console.log(res);
          this.allMessage = res;
          this.title = res.name;
          this.handleClick('morphologicalCharacteristics', '基本特征')

        })
        .catch(() => {
          this.$message.error('资源获取错误！');
        });
    }
  },
  mounted () {
    this.name = this.$route.query.name;
    this.getMessage();
    /** */
  }
};
</script>

<style scoped>
.about {
  height: 100%;
}
.title {
  /* color: #56ab2f; */
}
.title .title1 {
  display: inline-block;
  height: 8vh;
  line-height: 8vh;
  font-size: 40px;
  font-weight: bold;
  text-align: left;
  padding-left: 28px;
}
.title .title2 {
  margin-left: 30px;
  font-size: 25px;
  font-weight: bold;
}
.el-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.el-aside {
  background: white !important;
  width: 20%;
  height: 83%;
}
.el-main {
  position: absolute;
  right: 1px;
  top: 60px;
  background: white;
  margin-left: 15px;
  width: 78%;
  height: 83%;
  padding: 0;
  margin: 0;
}
.el-main .box-card {
  width: 100%;
  height: 100%;
  margin: 0;
}
.card-header {
  font-weight: bold;
}
.el-card /deep/.el-card__header {
  border-bottom-color: #b3e19d !important;
}
.el-menu .el-menu-item {
  border: 1px solid #f0f9eb !important;
  color: rgb(102, 153, 52);
  font-weight: bold;
}
.el-menu .el-menu-item:hover {
  background: rgb(241, 246, 239);
}
.right {
  position: absolute;
  display: inline-block;
}
.right img {
  width: 170px;
  height: 170px;
  margin: 0 10px;
}

.picture > img {
  position: relative;
  width: 45%;
}
</style>
